<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>文章类别列表</title>
    <link href="${ctx }/css/ztreeStyle.css" rel="stylesheet" type="text/css" />
    <link href="${ctx }/css/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link href="${ctx }/css/ajax_tip.css" rel="stylesheet" type="text/css" />
    <link href="${ctx }/js/layui/css/layui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .formtitle{
            height: 29px;
            margin-bottom: 8px;
        }
        .listBtnDiv{
            margin-top: -8px;
            margin-right: 0px;
        }
        .leftTreeDiv{
            width: 220px;
            float: left;
            margin: 10px;
            padding: 10px;
            margin-top: 0px;
            margin-right: 0px;
            padding-top:3px;
        }
        .zTreeDemoBackground{
            width: 210px;
            height: 100%;
            overflow: auto;
        }

    </style>
</head>
<body>
<div class="listNavTitle">
    <p>
        <label>系统管理 ></label>
        <label>文章类别管理</label>
    </p>
</div>
<div class="rightinfo">
    <div class="formtitle">
        <span id="parentSpanName">当前选择文章类别:未选择</span>
        <div class="listBtnDiv">
        <@shiro.hasPermission name="sysman:ARTICLETYPE_MAN:add">
            <button id="add" class="layui-btn layui-btn-normal" title="button">新增文章类别</button>
        </@shiro.hasPermission>
        </div>
    </div>
    <div class="leftTreeDiv">
        <table class="tablelist">
            <thead>
            <tr>
                <th>文章类别</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <form id="searchForm" style="display:none;">
        <ul class="search_forminfo">
            <li style="float:right;">
                <label>&nbsp;</label>
                <input type="hidden" name="parentId" value="0" id="parentId"/>
            </li>
        </ul>
    </form>
    <div id="pageList" style="float:left;margin-left:10px;clear: none;">

    </div>
</div>
</body>
</html>
<script type="text/javascript" src="${ctx}/js/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${ctx}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script type="text/javascript" src="${ctx }/js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${ctx }/js/layui/layui.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        initUrl('${ctx}/sysman/articles/articleTypeAjaxList.do','','${ctx}/sysman/articles/toChangeView.do','${ctx}/sysman/articles/delArticleType.do');

        baseSearchQueryLayer(1,20);

        $("#add").click(function(){
            //var areaId = $("#areaId").val();
            //alert(document.getElementById('articleTypeId').value);
            toBaseLayer(false,933,530,true,'${ctx}/sysman/articles/toArticleTypeAdd.do?parentId='+document.getElementById('parentId').value);
        });

        $(".zTreeDemoBackground").height($(window).height()-210);
        $("#pageList").width($(window).width()-300);
        $(".rightinfo").height($(window).height()-80);
        onloadNav();
    });

    /*function dicList(){
        var dicTypeId = $("#dicTypesel option:selected").val();
        if(panIsNull(dicTypeId)){
            return;
        }
        $("#dicIdsel").html('<option value>请选择</option>');
        var loadi = layer.load();
        $.ajax({
            type : "POST",
            url : '${ctx}/sysman/systemDic/innList.do',
            data : {"dicTypeId":dicTypeId},
            dataType : "json",
            success : function(data) {
                layer.close(loadi);
                var options = '<option value>请选择</option>';
                for(var i = 0;i<data.length;i++){
                    options = options + "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                }
                $("#dicIdsel").html(options);
            }
        });
    }*/

    var selArticleTypeId;
    var articleTypeList = ${articleTypeList};
    // 加载权限资源图数据
    // 加载权限资源图数据
    function onloadNav(){
        var loadi = layer.load();
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            async: {
                enable: true,
                url:"${ctx}/sysman/articles/popupArticleTypeList.do",
                autoParam:["id=parentId"],
                dataFilter: filter
            },
            callback: {
                onClick: onClick

            }
        };
        if(panIsNull(articleTypeList)){
            layer.alert('未找到文章类别数据');
            $("#treeDemo").html('<div align="center" style="color: gray">无数据</div>');
            layer.close(loadi);
            return;
        }
        var jsondata="[";
        for(var i = 0;i<articleTypeList.length;i++){
            jsondata+="{'pId':'"+articleTypeList[i].parentid+"','id':'"+articleTypeList[i].id+"','name':'"+articleTypeList[i].name+"'},"
        }
        jsondata = jsondata.substring(0,jsondata.length-1);
        jsondata+="]";
        jsondata=eval(jsondata);
        $.fn.zTree.init($("#treeDemo"), setting, jsondata);
        areaZtree = $.fn.zTree.getZTreeObj("treeDemo");
        areaMenu = $("#areaForOrgansMenu");
        layer.close(loadi);
    }

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes){
            /*parent.$("#articleTypeId").val(parentNode.id);
            parent.$("#articleTypeName").text(parentNode.name);
            var index = parent.layer.getFrameIndex(window.name);
            window.parent.layer.close(index);*/
            return null;
        }
        if (childNodes.length==0){
            parent.$("#typeId").val(parentNode.id);
            parent.$("#typeName").val(parentNode.name);
            var index = parent.layer.getFrameIndex(window.name);
            window.parent.layer.close(index);
        }
        var jsondata="[";
        for(var i = 0;i<childNodes.length;i++){
            jsondata+="{'pId':'"+childNodes[i].parentId+"','id':'"+childNodes[i].id+"','name':'"+childNodes[i].name+"','id':'"+childNodes[i].id+"','type':'articleType'},"
        }
        jsondata = jsondata.substring(0,jsondata.length-1);
        jsondata+="]";
        jsondata=eval(jsondata);
        return jsondata;
    }
    var type = '';
    function refreshNodes(treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        if(type.indexOf(treeNode.id)<0) {
            type += "," + treeNode.id;
            treeNode.isParent = true;
            zTree.reAsyncChildNodes(treeNode, 'refresh', false);
        }
    }
    function onClick(event, treeId, treeNode, clickFlag) {
        selArticleTypeId = treeNode.id;
        $("#parentId").val(selArticleTypeId);
        refreshNodes(treeNode);
        baseSearchQueryLayer(1,'Refresh');
        $("#parentSpanName").html('当前选择文章类别:'+treeNode.name);
    }
</script>